simple wysiwyg editor [ source code ]

This is a WYSIWYG text editor based HTML and JavaScript , we need to create them to execCommand () and div tag with content editable content attribute.
<button onclick="document.execCommand('bold',false,null);">Bold</button> <button onclick="document.execCommand('createLink',false,null);">createLink</button> <button onclick="document.execCommand('undo',false,null);">undo</button> <button onclick="document.execCommand('redo',false,null);">redo</button> <button onclick="document.execCommand('insertOrderedList',false,null);">insertOrderedList</button> <button onclick="document.execCommand('copy',false,null);">copy</button> <button onclick="document.execCommand('cut',false,null);">cut</button> <button id="paste">Paste</button> <div style="border:1px solid; padding: 3px; width:100%; height:400px; background:white" id='input' contenteditable='true'> select some of this text and then hit one of the buttons above </div> <script> document.getElementById('paste').addEventListener('click', ()=>{ let pasteArea = document.getElementById('input'); navigator.clipboard.readText() .then((text)=>{ document.execCommand('insertText', false, text) }); }); </script>

© Manajmnt code

Share to :

☷✎